<template>
  <f7-page>
    <div
      style="
        width: 100%;
        padding: calc(20px * var(--ratio)) calc(32px * var(--ratio));
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
      "
    >
      <div class="left">
        <f7-link back
          ><f7-icon f7="chevron_left" style="color: #000"></f7-icon
        ></f7-link>
      </div>
      <div class="title">设置</div>
      <div class="right">
        <f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link>
      </div>
    </div>

    <!-- <f7-navbar>
      <f7-nav-left>
        <f7-link back icon-material="arrow_back"></f7-link>
      </f7-nav-left>
      <f7-nav-title>设置</f7-nav-title>
    </f7-navbar> -->
    <f7-list class="userlist">
      <!-- <f7-list-item title="主题" smart-select :smart-select-params="{openIn: 'sheet'}">
        <select name="theme" @change="setTheme" :value="theme">
          <option value="ios">iOS</option>
          <option value="md">Material</option>
        </select>
      </f7-list-item> -->
      <!-- <f7-list-item title="颜色" smart-select :smart-select-params="{openIn: 'sheet'}">
        <select name="color" @change="setColor" v-model="color">
          <option value="blue">蓝色</option>
          <option value="red">红色</option>
          <option value="green">绿色</option>
          <option value="pink">粉色</option>
          <option value="yellow">黄色</option>
          <option value="orange">橙色</option>
          <option value="gray">灰色</option>
          <option value="black">黑色</option>
        </select>
      </f7-list-item> -->
      <f7-list-item title="主题颜色" :link="'/setting/themes'"> </f7-list-item>
      <f7-list-item
        title="字体"
        smart-select
        :smart-select-params="{ openIn: 'sheet' }"
      >
        <select name="font" @change="setFont" :value="font">
          <option value="big">大</option>
          <option value="middle">中</option>
          <option value="small">小(默认)</option>
        </select>
      </f7-list-item>
      <f7-list-item title="夜间模式">
        <!-- <f7-toggle slot="after" :checked="layout" @change="setLayout"></f7-toggle> -->
        <qm-switch slot="after" v-model="layout" @input="setLayout"></qm-switch>
      </f7-list-item>
      <f7-list-item title="自动夜间模式(20:00-8:00)">
        <!-- <f7-toggle slot="after" :checked="autoNight" @change="setAutoNight"></f7-toggle> -->
        <qm-switch
          slot="after"
          v-model="autoNight"
          @input="setAutoNight"
        ></qm-switch>
      </f7-list-item>
    </f7-list>
    <f7-list class="userlist">
      <f7-list-item title="清空缓存" link="#" @click="clear"></f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import controller from "../../libs/framework/controller";
export default class instance extends controller {
  getViewModel() {
    this.context.theme = this.vm.$f7.theme;
    let waitings = [
      this.$framework.db.settings.get("color"),
      this.$framework.db.settings.get("layout"),
      this.$framework.db.settings.get("autoNight"),
      this.$framework.db.settings.get("font"),
    ];
    return new Promise((re, rj) => {
      Promise.all(waitings).then(
        (values) => {
          values.forEach((v) => {
            if (v && v.value) {
              this.context[v.key] = v.value;
            }
          });
          re(values);
        },
        (values) => {
          rj(values);
        }
      );
    });
  }
  mixin() {
    return {
      data() {
        return {
          theme: "ios",
          color: "blue",
          layout: false,
          autoNight: false,
          font: "small",
        };
      },
      methods: {
        setTheme(e) {
          if (e.target.value && this.$f7.theme != e.target.value) {
            this.$framework.db.settings.put({
              key: "theme",
              value: e.target.value,
            });
            if (window.plus) {
              window.plus.runtime.restart();
            } else {
              window.location.href = "?theme=" + e.target.value;
            }
          }
        },
        // setLayout(e) {
        //   this.$f7.$(".view").removeClass("theme-white theme-dark");
        //   this.$f7
        //     .$(".view")
        //     .addClass(e.target.checked ? "theme-dark" : "theme-white");
        //   this.layout = e.target.checked;
        //   this.$framework.db.settings.put({
        //     key: "layout",
        //     value: e.target.checked
        //   });
        // },
        setLayout(e) {
          this.$f7.$(".view").removeClass("theme-white theme-dark");
          this.$f7.$(".view").addClass(e ? "theme-dark" : "theme-white");
          this.layout = e;
          this.$framework.db.settings.put({
            key: "layout",
            value: e,
          });
        },
        // setAutoNight(e) {
        //   this.$framework.db.settings.put({
        //     key: "autoNight",
        //     value: e.target.checked
        //   });
        // },
        setAutoNight(e) {
          this.$framework.db.settings.put({
            key: "autoNight",
            value: e,
          });
        },
        setColor(e) {
          if (e.target.value) {
            this.$f7
              .$(".view")
              .removeClass(
                "color-theme-pink color-theme-blue color-theme-red color-theme-black color-theme-gray color-theme-orange color-theme-yellow color-theme-green color-theme-white"
              );
            this.$f7.$(".view").addClass("color-theme-" + e.target.value);
            this.color = e.target.value;
            this.$framework.db.settings.put({
              key: "color",
              value: e.target.value,
            });
          }
        },
        setFont(e) {
          if (e.target.value) {
            this.$f7
              .$(".view")
              .removeClass("font-theme-small font-theme-middle font-theme-big");
            this.$f7.$(".view").addClass("font-theme-" + e.target.value);
            this.font = e.target.value;
            this.$framework.db.settings.put({
              key: "font",
              value: e.target.value,
            });
          }
        },
        clear() {
          this.$f7.dialog.confirm("确定清空应用缓存吗？", () => {
            let dbName = this.$framework.db.name;
            try {
              this.$framework.db.Dexie.delete(dbName);
            } catch (error) {}
            try {
              window.shimIndexedDB.deleteDatabase(dbName);
            } catch (error) {}
            window.localStorage.clear();
            if (window.plus) {
              window.plus.restart();
            } else {
              window.location.reload();
            }
          });
        },
      },
    };
  }
}
</script>
